<template>
   <div>
       <el-table size="small" :row-style="{height:'30px'}" border :data="tableDataArr" style="width: 100%">
           <el-table-column
                   align="center"
                   type="selection"
                   width="55">
           </el-table-column>
           <el-table-column
                   :show-overflow-tooltip="true"
                   v-for="item in table.tableTitle"
                   :prop="item.prop"
                   :label="item.title"
                   align="center"
                   >
           </el-table-column>
           <el-table-column :width="table.operationSize" align="center" label="操作">
                <template slot-scope="scope">
                    <slot :rowData="scope"></slot>
                </template>
            </el-table-column>
       </el-table>
<!--       total 总条数  page-size 每页显示多少条 current-page.sync 当前页是多少页-->
       <el-pagination
               @current-change="handleCurrentChange"
               :current-page.sync="currentPage"
               :page-size="10"
               layout="prev, pager, next, jumper"
               :total="total">
       </el-pagination>
   </div>
</template>

<script>
    import {jishufangxiangFenye} from '../http/api'
    import {mapActions,mapState} from 'vuex'
    export default {
        name: "tableCom",
        //tableDataArr: 表格的数据,
        // table:表的配置  包含  1表头.2表的操作列的宽度  3筛选情况下的分页的筛选条件
        // total 一共有多少条数据
        props:['table','tableDataArr','total'],
        data(){
            return{
                currentPage:1
            }
        },
        methods:{
            ...mapActions(['selectTableData']),
            handleCurrentChange(val) {
                this.selectTableData({
                    url:jishufangxiangFenye,
                    params:{page:val,...this.table.mohuChaxun}
                })
            }
        }
    }
</script>

<style scoped>
    .el-table-column{
        white-space:nowrap;
        text-overflow:ellipsis;
    }
</style>